<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,aItemress=no">
	<title>生日管理</title>
	<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
	<link rel="stylesheet" type="text/css" href="../../css/app.css" />
	<link rel="stylesheet" type="text/css" href="../../css/aui-list-swipe.css" />
	<style type="text/css">
		body {
			background-color: #F5F5F5;
		}

		.birthday-list {
			/*height: 2.5rem;*/
			line-height: 2.5rem;
			position: relative;
			overflow: hidden;
			-webkit-transform-style: preserve-3d;
			transform-style: preserve-3d;
			-webkit-touch-callout: none;
			margin-bottom: .5rem;
			padding: 0 .75rem;
		}

		.aui-text-left {
			float: left;
		}

		img {
			display: inline-block;
			vertical-align: middle;
		}

		.aui-swipe-right-btn {
			/*padding: 0 20px;*/
			background: #FF1E1E;
			color: #ffffff;
		}

		.tips-head {
			padding: .75rem .75rem;
		}

		.tips-head>div {
			color: #666666;
			height: 1.8rem;
			line-height: 0.9rem;
			font-size: .65rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(102, 102, 102, 1);
		}

		.aui-swipe-handle {
			background-color: #F5F5F5;
			margin-bottom: 2rem;
		}

		.info-name {
			border-bottom: 1px solid #EEEEEE;
			width: 100%;
			display: inline-block;
			background-color: #fff;
			font-size: .75rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(102, 102, 102, 1);
		}

		.info-birth {
			border-bottom: 1px solid #EEEEEE;
			width: 100%;
			display: inline-block;
			background-color: #fff;
		}

		.info-birth>span {
			font-size: .75rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(102, 102, 102, 1);
		}

		.del-edit {
			display: inline-block;
			margin-top: .15rem;
			background-color: #fff;
			float: right;
		}

		.del-edit img {
			width: 1rem;
			display: inline-block;
		}

		.add-birth {
			background: linear-gradient(135deg, rgba(132, 229, 255, 1) 0%, rgba(107, 180, 255, 1) 100%, rgba(122, 174, 229, 1) 100%);
			border-radius: 1.55rem;
			height: 1.95rem;
			width: 17.25rem;
			line-height: 1.95rem;
			text-align: center;
			margin-left: 50%;
			transform: translateX(-50%);
			color: #fff;
		}

		.wraper-add-birth {
			padding-top: 0.25rem;
			width: 100%;
			height: 2.2rem;
			background: #ffffff!important;
			position: fixed;
			bottom: .25rem;
		}

		body {
			background-color: #F5F5F5;
		}

		.aui-list .aui-list-item-inner {
			height: 2.5rem;
			line-height: 2.5rem;
		}

		.aui-list .aui-list-item {
			padding-left: 0!important;
			font-size: .75rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(34, 34, 34, 1);
		}

		.aui-list .aui-list-item-inner {
			padding-right: 0!important;
		}

		.aui-list img {
			display: inline-block;
			vertical-align: sub;
			width: 1rem;
			height: 1rem;
		}

		.aui-btn-block {
			margin: .8rem 0;
			width: 17.25rem;
			height: 2rem;
			line-height: 2rem;
			color: #FFFFFF;
			/*background: linear-gradient(-152deg, #ff00ff, #9b00ff);
				background: linear-gradient(270deg, #ff00ff, #9471da);*/
			/*background: linear-gradient(270deg, #ee02fd, #9972e6);*/
			background: linear-gradient(135deg, rgba(132, 229, 255, .29) 0%, rgba(107, 180, 255, .29) 100%, rgba(122, 174, 229, .29) 100%);
			border-radius: 1.25rem;
			/*opacity:0.29;*/
			font-size: .8rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
			text-align: center;
		}

		.btn {
			margin: 2rem .5rem 1.5rem .5rem;
			padding-bottom: .5rem;
		}

		input {
			text-align: right;
		}

		::placeholder {
			font-size: .75rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(187, 187, 187, 1);
		}

		.active {
			background: linear-gradient(135deg, rgba(132, 229, 255, 1) 0%, rgba(107, 180, 255, 1) 100%, rgba(122, 174, 229, 1) 100%);
		}
	</style>
</head>

<body>
	<div id="app" v-cloak="">
		<div class="tips-head">
			<div>亲爱的朋友们，我们将在生日前1周、2天、当天发送短信提醒您哦~</div>
		</div>

		<!-- 当有生日提醒的数据时... -->
		<div v-if="info.user_family!=0">
			<div class="aui-swipe-handle">
				<div v-for="vo in info.user_family" class="ming-bg-white birthday-list">
					<!-- 添加信息 -->
					<div class="aui-text-left info-name">
						{{vo.realname}}
					</div><br>
					<div class="aui-text-left info-birth">
						<span>{{vo.birthday}}</span>
					</div>
					<!-- 编辑和删除 -->
					<div class="del-edit">
						<span style="padding-right:1rem;" tapmode @touchstart.stop @click="edit(vo)">
								<img src="../../image/btn/btn-edit.png" />
							</span>
						<span tapmode @touchstart.stop tapmode @touchstart.stop @click="del(vo.id)">
								<img src="../../image/btn/btn-del.png" />
							</span>
					</div>
				</div>
			</div>
			<div class="wraper-add-birth">
				<div class="add-birth" tapmode @click="open_add_zhangbei()">
					新增生日提醒
				</div>
			</div>
		</div>

		<!-- 当没有有生日提醒的数据时... -->
		<div v-if="info.user_family==0">
			<div class="ming-bg-white" style="padding:0 .75rem;">
				<ul class="aui-list aui-list-noborder">
					<li class="aui-list-item">
						<div class="aui-list-item-inner">
							<div class="aui-list-item-title">
								姓名
							</div>
							<div class="aui-list-item-title" style="font-size: 0.75rem;padding-right:.5rem;">
								<input v-model="realname" type="text" placeholder="请输入姓名" maxlength="15" style="color:#666666;" />
							</div>
						</div>
					</li>
					<li class="aui-list-item" tapmode @click="sel_date">
						<div class="aui-list-item-inner">
							<div class="aui-list-item-title">
								生日
							</div>
							<div class="aui-list-item-title">
								<span v-if="birthday!==''" style="font-size:.75rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(102,102,102,1);display:ininline-block;margin-right:-.3rem;">
										{{birthday}}
									</span>
								<span v-else style="font-size:15px;font-family:PingFangSC-Regular;font-weight:400;color:rgba(187,187,187,1);display:inline-block;margin-right:-.3rem;">请选择</span>
								<img src="../../image/btn/btn-right.png" style="margin-right:.3rem;" />
							</div>
						</div>
					</li>
					<li class="aui-list-item" tapmode onclick="next()">
						<div class="aui-btn-block" :class="{'active':realname!=='' && birthday!==''}">
							增加生日提醒
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-list-swipe.js"></script>
<script>
	var swipe;
	var vm = new Vue({
		el: "#app",
		data: {
			info: {
				user_family: []
			},
			id: 0,
			realname: '',
			callname: '',
			birthday: '',
		},
		methods: {
			open_add_zhangbei: function() {
				if (vm.info.user_family.length >= 6) {
					toast('最多可以设置6个生日');
				} else {
					open_win('my_zhangbei', 'my_zhangbei.html', false)
				}
			},
			get_list: function() {
				get_data('api/User/birthdayList', {
					token: $api.getStorage('token')
				}, function(ret) {
					if (ret.status) {
						vm.info = ret.data
						vm.$nextTick(function() {
							if (swipe) {
								swipe.resetSwipe();
								return;
							}
							swipe = new ListSwipe();

						});
					}
				})
			},
			edit: function(vo) {
				$api.setStorage('birthday_info', {
					id: vo.id,
					realname: vo.realname,
					callname: vo.callname,
					birthday: vo.birthday,
				})
				open_win('my_modify', 'my_modify.html', false)
			},
			del: function(id) {
				// var dialogBox = api.require('dialogBox');
				// dialogBox.alert({
				// 	texts: {
				// 		title: '提示',
				// 		content: '确定要删除该条消息吗？',
				// 		leftBtnTitle: '取消',
				// 		rightBtnTitle: '确定'
				// 	},
				// 	styles: {
				// 		bg: '#fff',
				// 		w: 295,
				// 		corner: 10,
				// 		title: {
				// 			marginT: 17,
				// 			titleSize: 15,
				// 			titleColor: '#444444'
				// 		},
				// 		content: {
				// 			marginT: 18,
				// 			marginB: 30,
				// 			color: '#444444',
				// 			size: 17
				// 		},
				// 		left: {
				// 			marginB: 0,
				// 			marginL: 0,
				// 			w: 147.5,
				// 			h: 55,
				// 			corner: 10,
				// 			// bg: 'widget://image/ico/ico_btn_left_bg.png',
				// 			color: '#999999',
				// 			size: 16
				// 		},
				// 		right: {
				// 			marginB: 0,
				// 			marginL: 0,
				// 			w: 147.5,
				// 			h: 55,
				// 			corner: 10,
				// 			bg: '#fff',
				// 			color: '#72D5EF',
				// 			size: 16
				// 		},
				// 		horizontalLine: {
				// 			color: '#EEEEEE',
				// 			height: 1
				// 		},
				// 		verticalLine:{
				//       color:'#EEEEEE', //（可选项）字符串类型；左右按钮中间竖线的颜色，支持rgb、rgba、#；默认：'rgba(245,245,245,0)'
				//       width:1                 //（可选项）数字类型；左右边按钮竖线的高度；默认：0
				//     }
				// 	}
				// }, function(ret) {
				//   if (ret.eventType == 'left') {
				//     var dialogBox = api.require('dialogBox');
				//     dialogBox.close({
				//       dialogName: 'alert'
				//     });
				//   } else if (ret.eventType == 'right') {
				// 		// console.log(id)
				// 		get_data('api/user/delUserFamily', {
				// 			token: $api.getStorage('token'),
				// 			id: id
				// 		}, function(ret) {
				// 			if(ret.status) {
				// 				vm.get_list();
				// 			}
				// 		})
				//     var dialogBox = api.require('dialogBox');
				//     dialogBox.close({
				//       dialogName: 'alert'
				//     });
				//   }
				// });
				var dialogBox = api.require('dialogBox');
				dialogBox.alert({
					texts: {
						title: '提示',
						content: '确定要退出当前账号吗？',
						leftBtnTitle: '取消',
						rightBtnTitle: '确认'
					},
					styles: {
						bg: '#fff',
						w: 295,
						corner: 10,
						title: {
							marginT: 20,
							titleSize: 17,
							titleColor: '#444444'
						},
						content: {
							marginT: 18,
							marginB: 30,
							color: '#444444',
							size: 17
						},
						left: {
							marginB: 0,
							marginL: 0,
							w: 147.5,
							h: 55,
							corner: 10,
							// bg: 'widget://image/ico/ico_btn_left_bg.png',
							bg: "#fff",
							color: '#999999',
							size: 16
						},
						right: {
							marginB: 0,
							marginL: 0,
							w: 147.5,
							h: 55,
							corner: 10,
							bg: '#fff',
							color: '#005A93',
							size: 16
						},
						horizontalLine: {
							color: '#EEEEEE',
							height: 1
						},
						verticalLine: {
							color: '#EEEEEE', //（可选项）字符串类型；左右按钮中间竖线的颜色，支持rgb、rgba、#；默认：'rgba(245,245,245,0)'
							width: 1 //（可选项）数字类型；左右边按钮竖线的高度；默认：0
						}
					}
				}, function(ret) {
					if (ret.eventType == 'left') {
						var dialogBox = api.require('dialogBox');
						dialogBox.close({
							dialogName: 'alert'
						});
					} else if (ret.eventType == 'right') {
						// $api.rmStorage('token')
						// $api.rmStorage('userinfo')
						// send_event('loginout')
						// openWin_login();
						// vm.shadow = false;
						// setTimeout(function() {
						// 	close_win()
						// }, 1000)
						get_data('api/user/delUserFamily', {
							token: $api.getStorage('token'),
							id: id
						}, function(ret) {
							if (ret.status) {
								vm.get_list();
							}
						})

						var dialogBox = api.require('dialogBox');
						dialogBox.close({
							dialogName: 'alert'
						});
					}
				});
			},
			sel_date: function() {
				api.openPicker({
					type: 'date',
					title: '选择日期'
				}, function(ret, err) {
					if (ret) {
						var str = ret.year + '.' + ret.month + '.' + ret.day;
						vm.birthday = str;
					} else {
						console.log(JSON.stringify(err));
					}
				});
			}
		}
	})
	apiready = function() {
		vm.get_list()
		add_event('birthday_ref', function(ret) {
			vm.get_list()
		})
		if ($api.getStorage('birthday_info')) {
			vm.id = $api.getStorage('birthday_info').id
			vm.realname = $api.getStorage('birthday_info').realname
			vm.callname = $api.getStorage('birthday_info').callname
			vm.birthday = $api.getStorage('birthday_info').birthday
			$api.rmStorage('birthday_info')
		}
	}

	function next() {
		if (vm.id == 0) {
			get_data('/api/User/addUserFamily', {
				token: $api.getStorage('token'),
				realname: vm.realname,
				callname: '',
				birthday: vm.birthday
			}, function(ret) {
				toast(ret.msg)
				if (ret.status) {
					send_event('birthday_ref')
					delay_close(300)
				}
			})
		} else {
			get_data('/api/User/editUserFamily', {
				id: vm.id,
				token: $api.getStorage('token'),
				realname: vm.realname,
				// callname:vm.callname,
				birthday: vm.birthday
			}, function(ret) {
				toast(ret.msg)
				if (ret.status) {
					send_event('birthday_ref')
					delay_close(300)
				}
			})
		}
	}
</script>

</html>
